<template>
    <h2 style="text-align: center;">添加角色信息</h2>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="Info" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <!-- 输入框 -->
        <el-form-item label="角色名称" prop="Role_Name">
            <el-input v-model="Info.Role_Name" />
        </el-form-item>
        <!-- 状态单选框 -->
        <el-form-item label="状态" prop="Role_State">
            <el-radio-group v-model="Info.Role_State">
                <el-radio :value="true">启用</el-radio>
                <el-radio :value="false">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- 树形结构 -->
        <el-form-item label="权限">
            <el-tree style="max-width: 600px" :data="InfoPermission" ref="treeRef" show-checkbox node-key="id"
                v-model="Info.Permission_Id" :props="defaultProps"  />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                添加
            </el-button>
            <el-button @click="resetForm(ruleFormRef)" style="margin-right: 10px;">重置</el-button>
            <a href="/ShowPermission">返回列表</a>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, ElTree, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//添加响应式数据
const Info = ref({
    Role_Name: '',
    Role_State: true,
    Permission_Id: [],//数组类型
})
//通过ref引用ElTree的实例，可以通过treeRef.value来获取实例
const treeRef=ref<InstanceType<typeof ElTree>>();

const locationOptions = ['Home', 'Company', 'School']
//验证
const rules = reactive<FormRules>({
    Role_Name: [
        { required: true, message: '角色名称不能为空！', trigger: 'blur' },
    ],
})
//按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('数据效验成功，请执行添加操作!')
            //获取权限编号
            var perid=treeRef.value?.getCheckedKeys(false);
            treeRef.value?.getCheckedNodes();
            axios.post("https://localhost:44377/api/User/AddRolePerInfo", Info.value,
                {
                    params: {
                        permissionList: perid?.values.toString()
                    }
                }
            )
                .then(res => {
                    if (res.data.Data == -1) {
                        ElMessage.error("角色名称已存在，请重新输入！")
                        return;
                    }
                    else if (res.data.Data > 0) {
                        ElMessage.success("角色信息添加成功")
                        router.push("/ShowPermission");//跳转到显示页面
                    }
                    else {
                        ElMessage.error("角色信息添加失败")
                    }
                })
        } else {
            console.log('数据参数有错误，请检查!', fields)
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//-----------------------------树形结构---------------------------------//

//权限响应式数据
const InfoPermission = ref([])
//生命周期钩子函数
onMounted(() => {
    ShowPermissionInfo();//加载权限信息
})
//加载权限信息
const ShowPermissionInfo = () => {
    axios.get("https://localhost:44377/api/User/ShowPermission?Pid=0")
        .then(res => {
            InfoPermission.value = res.data.Data
        })
}
const defaultProps = {
    children: 'children',
    label: 'label',
}
const add=(data:any)=>{
    data.getCheckedNodes();
console.log(data.getCheckedNodes())
   
}

</script>